<template>
  <div class="image-container set-full-height" style="background-image: url('../../../static/images/wizard.jpg')">
    <!--   Creative Tim Branding   -->
    <a href="#">
      <div class="logo-container">
        <div class="logo">
          <img src="../../../static/images/new_logo.png">
        </div>
        <div class="brand">
          Creative Tim
        </div>
      </div>
    </a>

    <!--  Made With Get Shit Done Kit  -->
    <a href="#/get-shit-done/index.html?ref=get-shit-done-bootstrap-wizard" class="made-with-mk">
      <div class="brand">GK</div>
      <div class="made-with">Made with <strong>GSDK</strong></div>
    </a>

    <!--   Big container   -->
    <div class="container">
      <div class="row">
        <div class="col-sm-8 col-sm-offset-2">

          <!--      Wizard container        -->
          <div class="wizard-container">

            <div class="card wizard-card" data-color="orange" id="wizardProfile">
              <form action="" method="">
                <!--        You can switch ' data-color="orange" '  with one of the next bright colors: "blue", "green", "orange", "red"          -->

                <div class="wizard-header">
                  <h3>
                    <b>Register</b> YOUR Account <br>
                    <small>Please register your information,This information will let us know more about you.</small>
                  </h3>
                </div>

                <div class="wizard-navigation">
                  <ul>
                    <li><a href="#about" data-toggle="tab">First</a></li>
                    <li><a href="#account" data-toggle="tab">Second</a></li>
                    <li><a href="#address" data-toggle="tab">Last</a></li>
                  </ul>

                </div>

                <div class="tab-content">
                  <div class="tab-pane" id="about">
                    <div class="row">
                      <h4 class="info-text"> Let's start with the basic information</h4>
                      <div class="col-sm-4 col-sm-offset-1">
                        <div class="picture-container">
                          <div class="picture">
                            <img src="../../../static/images/default-avatar.png" class="picture-src"
                                 id="wizardPicturePreview" title=""/>
                            <input type="file" id="wizard-picture">
                          </div>
                          <h6>Choose Picture</h6>
                        </div>
                      </div>
                      <div class="col-sm-6">
                        <div class="form-group">
                          <label>Name
                            <small>(required)</small>
                          </label>
                          <input name="name" type="text" class="form-control" placeholder="Andrew...">
                        </div>
                        <div class="form-group">
                          <label>Password
                            <small>(required)</small>
                          </label>
                          <input name="password" id="password" type="password" class="form-control"
                                 placeholder="Andrew...">
                        </div>
                        <div class="form-group">
                          <label>Confirm Password
                            <small>(required)</small>
                          </label>
                          <input name="confirmPassword" type="password" class="form-control" placeholder="Smith...">
                        </div>
                      </div>
                      <div class="col-sm-10 col-sm-offset-1">
                        <div class="form-group">
                          <div class="row">
                            <div class="col-sm-7 ">
                              <label>Email
                                <small>(required)</small>
                              </label>
                              <input name="email" type="email" class="form-control"
                                     placeholder="andrew@creative-tim.com">

                            </div>
                            <div class="col-sm-5">
                              <div class="form-group">
                                <label>Sex</label><br>
                                <select name="sex" class="form-control">
                                  <option value="man"> man</option>
                                  <option value="woman"> woman</option>
                                </select>
                              </div>

                            </div>

                          </div>

                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane" id="account">
                    <h4 class="info-text"> What are you position? Can be both students and teachers, please choose
                      according to the actual situation </h4>
                    <div class="row">

                      <div class="col-sm-10 col-sm-offset-1">
                        <div class="col-sm-6">
                          <div :class="{'choice':realTrue, 'active':type1}" data-toggle="wizard-checkbox" @click="clickType1">
                            <input type="checkbox" name="type1" value="Student">
                            <div class="icon">
                              <i class="fa fa-pencil"></i>
                            </div>
                            <h6>Student</h6>
                          </div>
                        </div>
                        <div class="col-sm-6">
                          <div :class="{'choice':realTrue, 'active':type2}" data-toggle="wizard-checkbox" @click="clickType2">
                            <input type="checkbox" name="type2" value="Teacher">
                            <div class="icon">
                              <i class="fa fa-terminal"></i>
                            </div>
                            <h6>Teacher</h6>
                          </div>

                        </div>

                      </div>

                    </div>
                  </div>
                  <div class="tab-pane" id="address">
                    <div class="row">
                      <div class="col-sm-12">
                        <h4 class="info-text"> More Detail </h4>
                      </div>
                      <div class="col-sm-4 col-sm-offset-1">
                        <div class="form-group" v-if="type2">
                          <label> Main Grade</label><br>
                          <select name="grade" class="form-control">
                            <option value="Afghanistan"> Afghanistan</option>
                            <option value="Albania"> Albania</option>
                            <option value="Algeria"> Algeria</option>
                            <option value="American Samoa"> American Samoa</option>
                            <option value="Andorra"> Andorra</option>
                            <option value="Angola"> Angola</option>
                            <option value="Anguilla"> Anguilla</option>
                            <option value="Antarctica"> Antarctica</option>
                            <option value="...">...</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-sm-3 ">
                        <div class="form-group" v-if="type2">
                          <label>Sub Subject</label><br>
                          <select name="subSubject" class="form-control">
                            <option value="Afghanistan"> Afghanistan</option>
                            <option value="Albania"> Albania</option>
                            <option value="Algeria"> Algeria</option>
                            <option value="American Samoa"> American Samoa</option>
                            <option value="Andorra"> Andorra</option>
                            <option value="Angola"> Angola</option>
                            <option value="Anguilla"> Anguilla</option>
                            <option value="Antarctica"> Antarctica</option>
                            <option value="...">...</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-sm-3">
                        <div class="form-group" v-if="type2">
                          <label> Subject</label><br>
                          <select name="subject" class="form-control">
                            <option value="Afghanistan"> Afghanistan</option>
                            <option value="Albania"> Albania</option>
                            <option value="Algeria"> Algeria</option>
                            <option value="American Samoa"> American Samoa</option>
                            <option value="Andorra"> Andorra</option>
                            <option value="Angola"> Angola</option>
                            <option value="Anguilla"> Anguilla</option>
                            <option value="Antarctica"> Antarctica</option>
                            <option value="...">...</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-sm-4 col-sm-offset-1">
                        <div class="form-group">
                          <label>Province</label><br>
                          <select name="province" class="form-control">
                            <option value="Afghanistan"> Afghanistan</option>
                            <option value="Albania"> Albania</option>
                            <option value="Algeria"> Algeria</option>
                            <option value="American Samoa"> American Samoa</option>
                            <option value="Andorra"> Andorra</option>
                            <option value="Angola"> Angola</option>
                            <option value="Anguilla"> Anguilla</option>
                            <option value="Antarctica"> Antarctica</option>
                            <option value="...">...</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-sm-3">
                        <div class="form-group">
                          <label>City</label><br>
                          <select name="city" class="form-control">
                            <option value="Afghanistan"> Afghanistan</option>
                            <option value="Albania"> Albania</option>
                            <option value="Algeria"> Algeria</option>
                            <option value="American Samoa"> American Samoa</option>
                            <option value="Andorra"> Andorra</option>
                            <option value="Angola"> Angola</option>
                            <option value="Anguilla"> Anguilla</option>
                            <option value="Antarctica"> Antarctica</option>
                            <option value="...">...</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-sm-3">
                        <div class="form-group">
                          <label>Zone</label><br>
                          <select name="Zone" class="form-control">
                            <option value="Afghanistan"> Afghanistan</option>
                            <option value="Albania"> Albania</option>
                            <option value="Algeria"> Algeria</option>
                            <option value="American Samoa"> American Samoa</option>
                            <option value="Andorra"> Andorra</option>
                            <option value="Angola"> Angola</option>
                            <option value="Anguilla"> Anguilla</option>
                            <option value="Antarctica"> Antarctica</option>
                            <option value="...">...</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="wizard-footer height-wizard">
                  <div class="pull-right">
                    <input type='button' class='btn btn-next btn-fill btn-warning btn-wd btn-sm' @click="next" name='next'
                           value='Next'/>
                    <input type='button' class='btn btn-finish btn-fill btn-warning btn-wd btn-sm' name='finish'
                           value='Finish'/>
                  </div>

                  <div class="pull-left">
                    <input type='button' class='btn btn-previous btn-fill btn-default btn-wd btn-sm' name='previous'
                           value='Previous'/>
                  </div>
                  <div class="clearfix"></div>
                </div>

              </form>
            </div>
          </div> <!-- wizard container -->
        </div>
      </div><!-- end row -->
    </div> <!--  big container -->
  </div>

</template>

<script>

  export default {
    created() {

    },
    name: 'Register',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        realTrue:true,
        type2:false,
        type1:false
      }
    },
    mounted() {
      searchVisible = 0
      transparent = true
      /*  Activate the tooltips      */
      $('[rel="tooltip"]').tooltip()

      // Code for the Validator
      var $validator = $('.wizard-card form').validate({
        /* rules: {
          name: {
            required: true,
            minlength: 3
          },
          password: {
            required: true,
            minlength: 6
          },
          confirmPassword: {
            required: true,
            minlength: 6,
            equalTo: "#password"
          },
          email: {
            required: true,
            minlength: 3,
            email: true
          }
        },
        messages: {
          name: {
            required: "please inout your name",
            minlength: "length must > 3"
          }, password: {
            required: "please inout your password",
            minlength: "length must > 6"
          },
          confirmPassword: {
            required: "please inout your confirmPassword",
            minlength: "length must > 6"
          },
          confirmPassword: {
            required: "please inout your confirmPassword",
            minlength: "length must > 6"
          }, email: {
            required: "please inout your email",
            minlength: "The email format is incorrect"
          },
        } */
      });

      console.info(1);

      // Wizard Initialization
      $('.wizard-card').bootstrapWizard({
        'tabClass': 'nav nav-pills',
        'nextSelector': '.btn-next',
        'previousSelector': '.btn-previous',

        onNext: function (tab, navigation, index) {
          var $valid = $('.wizard-card form').valid()
          if (!$valid) {
            $validator.focusInvalid()
            return false
          }
        },

        onInit: function (tab, navigation, index) {
          // check number of tabs and fill the entire row
          var $total = navigation.find('li').length
          var $width = 100 / $total
          var $wizard = navigation.closest('.wizard-card')

          var $display_width = $(document).width()

          if ($display_width < 600 && $total > 3) {
            $width = 50
          }

          navigation.find('li').css('width', $width + '%')
          var $first_li = navigation.find('li:first-child a').html()
          var $moving_div = $('<div class="moving-tab">' + $first_li + '</div>')
          $('.wizard-card .wizard-navigation').append($moving_div)
          refreshAnimation($wizard, index)
          $('.moving-tab').css('transition', 'transform 0s')
        },

        onTabClick: function (tab, navigation, index) {
          var $valid = $('.wizard-card form').valid()

          if (!$valid) {
            return false
          } else {
            return true
          }
        },

        onTabShow: function (tab, navigation, index) {
          var $total = navigation.find('li').length
          var $current = index + 1

          var $wizard = navigation.closest('.wizard-card')

          // If it's the last tab then hide the last button and show the finish instead
          if ($current >= $total) {
            $($wizard).find('.btn-next').hide()
            $($wizard).find('.btn-finish').show()
          } else {
            $($wizard).find('.btn-next').show()
            $($wizard).find('.btn-finish').hide()
          }

          var button_text = navigation.find('li:nth-child(' + $current + ') a').html()

          setTimeout(function () {
            $('.moving-tab').text(button_text)
          }, 150)

          var checkbox = $('.footer-checkbox')

          if (!index == 0) {
            $(checkbox).css({
              'opacity': '0',
              'visibility': 'hidden',
              'position': 'absolute'
            })
          } else {
            $(checkbox).css({
              'opacity': '1',
              'visibility': 'visible'
            })
          }

          refreshAnimation($wizard, index)
        }
      })

      // Prepare the preview for profile picture
      $('#wizard-picture').change(function () {
        readURL(this)
      })

      $('[data-toggle="wizard-radio"]').click(function () {
        var wizard = $(this).closest('.wizard-card')
        wizard.find('[data-toggle="wizard-radio"]').removeClass('active')
        $(this).addClass('active')
        $(wizard).find('[type="radio"]').removeAttr('checked')
        $(this).find('[type="radio"]').attr('checked', 'true')
      })

      $('[data-toggle="wizard-checkbox"]').click(function () {
        if ($(this).hasClass('active')) {
          $(this).removeClass('active')
          $(this).find('[type="checkbox"]').removeAttr('checked')
        } else {
          $(this).addClass('active')
          $(this).find('[type="checkbox"]').attr('checked', 'true')
        }
      })

      $('.set-full-height').css('height', 'auto')
    },
    methods:{
      clickType1(){
        this.type1=!this.type1;
      },
      clickType2(){
        this.type2=!this.type2;
      },
      next(){
        let type=0;
        if(this.type1){
          type+=1;
        }
        if(this.type2){
          type+=2;
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
